<template>
  <div class="customer-dashboard-container">
    <!-- 顶部欢迎区域 -->
    <el-card class="welcome-card" shadow="hover">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎回来，尊敬的客户</h2>
          <p>快速查看您的订单状态或创建新的物流订单</p>
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="$router.push('/createOrder')">
            <el-icon><Plus /></el-icon>创建新订单
          </el-button>
          <el-button @click="$router.push('/track')">
            <el-icon><Location /></el-icon>追踪订单
          </el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 状态卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>总订单数</h3>
            <div class="stat-number">{{ orderStats.total || 0 }}</div>
          </div>
          <div class="stat-icon document">
            <el-icon><Document /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>运输中</h3>
            <div class="stat-number">{{ orderStats.inTransit || 0 }}</div>
          </div>
          <div class="stat-icon transit">
            <el-icon><Van /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>待签收</h3>
            <div class="stat-number">{{ orderStats.pendingDelivery || 0 }}</div>
          </div>
          <div class="stat-icon pending">
            <el-icon><Bell /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>已完成</h3>
            <div class="stat-number">{{ orderStats.completed || 0 }}</div>
          </div>
          <div class="stat-icon completed">
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 最近订单和收货地址 -->
    <div class="main-content">
      <!-- 最近订单 -->
      <el-card class="recent-orders-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>最近订单</h3>
            <el-button type="primary" link @click="$router.push('/myOrders')">查看全部</el-button>
          </div>
        </template>
        
        <el-table :data="recentOrders" style="width: 100%" v-loading="loading">
          <el-table-column prop="orderNumber" label="订单号" min-width="120" />
          <el-table-column prop="createTime" label="创建日期" min-width="100" />
          <el-table-column prop="recipient" label="收件人" min-width="100" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.statusText }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column width="100" fixed="right">
            <template #default="scope">
              <el-button type="primary" link @click="viewOrderDetail(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="empty-placeholder" v-if="recentOrders.length === 0 && !loading">
          <el-empty description="暂无订单数据"></el-empty>
        </div>
      </el-card>
      
      <!-- 常用地址 -->
      <el-card class="address-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>常用地址</h3>
            <el-button type="primary" link @click="$router.push('/addressBook')">管理地址簿</el-button>
          </div>
        </template>
        
        <div class="address-list" v-loading="loading">
          <div class="address-item" v-for="(address, index) in frequentAddresses" :key="index">
            <div class="address-icon">
              <el-icon><Location /></el-icon>
            </div>
            <div class="address-info">
              <div class="address-name">{{ address.name }} {{ address.phone }}</div>
              <div class="address-detail">{{ address.fullAddress }}</div>
            </div>
            <div class="address-actions">
              <el-button type="primary" size="small" @click="useAddress(address)">
                <el-icon><Promotion /></el-icon>
                发货
              </el-button>
            </div>
          </div>
        </div>
        
        <div class="empty-placeholder" v-if="frequentAddresses.length === 0 && !loading">
          <el-empty description="暂无常用地址"></el-empty>
        </div>
      </el-card>
    </div>
    
    <!-- 订单追踪区域 -->
    <el-card class="track-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>快速追踪</h3>
        </div>
      </template>
      
      <div class="track-form">
        <el-input v-model="trackNumber" placeholder="请输入运单号" class="track-input">
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="trackOrder">追踪订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Document, 
  Van, 
  Check, 
  Bell,
  Plus,
  Search,
  Location,
  Promotion
} from '@element-plus/icons-vue'

const router = useRouter()
const loading = ref(true)
const trackNumber = ref('')

// 订单统计数据
const orderStats = reactive({
  total: 12,
  inTransit: 3,
  pendingDelivery: 1,
  completed: 8
})

// 最近订单数据
const recentOrders = ref([
  {
    id: 1,
    orderNumber: 'LG202405080001',
    createTime: '2024-05-08',
    recipient: '张三',
    status: 2,
    statusText: '运输中'
  },
  {
    id: 2,
    orderNumber: 'LG202405070015',
    createTime: '2024-05-07',
    recipient: '李四',
    status: 3,
    statusText: '待签收'
  },
  {
    id: 3,
    orderNumber: 'LG202405060022',
    createTime: '2024-05-06',
    recipient: '王五',
    status: 4,
    statusText: '已完成'
  }
])

// 常用地址数据
const frequentAddresses = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****1234',
    fullAddress: '北京市海淀区中关村南大街5号'
  },
  {
    id: 2,
    name: '李四',
    phone: '139****5678',
    fullAddress: '上海市浦东新区张江高科技园区'
  }
])

// 获取状态类型
const getStatusType = (status: number) => {
  const typeMap: Record<number, string> = {
    1: 'info',    // 待揽收
    2: 'warning', // 运输中
    3: 'danger',  // 待签收
    4: 'success'  // 已完成
  }
  return typeMap[status] || 'info'
}

// 查看订单详情
const viewOrderDetail = (id: number) => {
  router.push(`/order?id=${id}`)
}

// 使用地址创建订单
const useAddress = (address: any) => {
  router.push({
    path: '/createOrder',
    query: { addressId: address.id }
  })
}

// 追踪订单
const trackOrder = () => {
  if (trackNumber.value) {
    router.push({
      path: '/track',
      query: { number: trackNumber.value }
    })
  }
}

onMounted(() => {
  // 模拟加载数据
  setTimeout(() => {
    loading.value = false
  }, 800)
})
</script>

<style scoped>
.customer-dashboard-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #409EFF 0%, #3178C6 100%);
  color: white;
  border: none;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  opacity: 0.8;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  border-radius: 8px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info h3 {
  font-size: 14px;
  color: #909399;
  margin: 0 0 10px 0;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.document {
  background-color: #409EFF;
}

.stat-icon.transit {
  background-color: #E6A23C;
}

.stat-icon.pending {
  background-color: #F56C6C;
}

.stat-icon.completed {
  background-color: #67C23A;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
}

.recent-orders-card, .address-card {
  min-height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.empty-placeholder {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

/* 地址列表 */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.address-icon {
  margin-right: 16px;
  font-size: 20px;
  color: #409EFF;
}

.address-info {
  flex: 1;
}

.address-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.address-detail {
  color: #606266;
  font-size: 14px;
}

.address-actions {
  margin-left: 16px;
}

/* 追踪卡片 */
.track-card {
  margin-bottom: 20px;
}

.track-form {
  display: flex;
  gap: 16px;
  max-width: 600px;
}

.track-input {
  flex: 1;
}

@media (max-width: 768px) {
  .stat-cards, .main-content {
    grid-template-columns: 1fr;
  }
  
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .track-form {
    flex-direction: column;
  }
}
</style> 